<template>
	<view class="pr">
		<view class="">
			<image class="bg" src="/static/my/user/bg.png" mode=""></image>
		</view>
		<view class="content pa0 w100">
			<view class="p2432">
				<view class="flex_x" v-if="token">
					<image class="img120 br50" :src="user.avatar" mode=""></image>
					<view class="ml24 cf fw600 fs36">{{user.nickname}}</view>
				</view>
				<view class="flex_x" v-else>
					<view class="img120 br50 bgf9"></view>
					<view class="ml24 cf fw600 fs36">立即登录</view>
				</view>
				<view class="mt24 plr30 flex_btw">
					<view class="cf flex_col flex_x">
						<view class="fw600 fs36">{{data_statistics.total}}</view>
						<view class="mt4 fs26">累计洗鞋(双)</view>
					</view>
					<view class="cf flex_col flex_x">
						<view class="fw600 fs36">{{data_statistics.discount}}</view>
						<view class="mt4 fs26">累计优惠(元)</view>
					</view>
					<view class="cf flex_col flex_x">
						<view class="fw600 fs36">{{data_statistics.coupon_num}}</view>
						<view class="mt4 fs26">我的卡卷</view>
					</view>
				</view>

				<view class="mt24 bgf shadow order br12 flex_btw">
					<view class="flex_col flex_c" v-for="(item,index) in orde_menu" :key="item.id"
						@click="myOrder(item,index)">
						<image class="img60" :src="item.img" mode=""></image>
						<view class="mt4 c3 fs24">{{item.name}}</view>
					</view>
				</view>

				<view class="mt24 bgf shadow br12 p2432">
					<view class="c3 fw600 fs32 mb24">服务功能</view>
					<view class="flex_btw flex_wrap">
						<view class="service" v-for="item in service_function" :key="item.id">
							<view class="" v-if="item.id == 6">
								<zh-button openType="contact">
									<view class="flex_col flex_c">
										<image class="img50" :src="item.img" mode=""></image>
										<view class="mt12 c3 fs24">{{item.name}}</view>
									</view>
								</zh-button>
							</view>
							<view v-else class="flex_col flex_c" :class="{'mb40':item.id<4}" @click="toPath(item)">
								<image class="img50" :src="item.img" mode=""></image>
								<view class="mt12 c3 fs24">{{item.name}}</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				orde_menu: [ //订单菜单
					{
						id: 1,
						name: '待付款',
						img: '/static/my/user/dfk.png',
					},
					{
						id: 2,
						name: '待投放',
						img: '/static/my/user/dtf.png',
					},
					{
						id: 3,
						name: '清洗中',
						img: '/static/my/user/qxz.png',
					},
					{
						id: 4,
						name: '待取货',
						img: '/static/my/user/dqh.png',
					},
					{
						id: 5,
						name: '已完成',
						img: '/static/my/user/ywc.png',
					},
				],
				service_function: [ //服务功能菜单
					{
						id: 1,
						name: '我的地址',
						img: '/static/my/user/dz.png',
						path: '/pages/user/my/address/address'
					},
					{
						id: 2,
						name: '我的订单',
						img: '/static/my/user/order.png',
						path: ''
					},
					{
						id: 3,
						name: '优惠券',
						img: '/static/my/user/coupon.png',
						path: '/pages/user/my/coupon/coupon'
					},
					{
						id: 4,
						name: '领劵中心',
						img: '/static/my/user/getcoupon.png',
						path: '/pages/user/my/getCoupon/getCoupon'
					},
					{
						id: 5,
						name: '关于我们',
						img: '/static/my/user/gywm.png',
						path: '/pages/share/textContent/textContent?type=about_us&title=关于我们'
					},
					{
						id: 6,
						name: '联系客服',
						img: '/static/my/user/kf.png',
						path: ''
					}
				],
				data_statistics: { //数据统计
					coupon_num: 0,
					discount: 0,
					total: 0
				},
			}
		},
		methods: {
			toPath(item) { //跳转
				if (item.id == 2) {
					this.$store.commit('save_user_order_active', 0)
					uni.switchTab({
						url: '/pages/share/order/order'
					})
				} else {
					uni.navigateTo({
						url: item.path
					})
				}
			},
			myOrder(item, index) { //订单
				this.$store.commit('save_user_order_active', index)
				uni.switchTab({
					url: '/pages/share/order/order'
				})
			},
			userStatistics() { //数据统计
				this.$api.userStatistics().then(res => {
					if (res.code == 1) {
						this.data_statistics = res.data
					}

				})
			},
		},
		computed: {
			...mapState({
				user: state => state.userInfo,
			}),
		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.bg {
		width: 100%;
		height: 341upx;
	}

	.order {
		padding: 24upx 56upx;
	}

	.shadow {
		box-shadow: 0px 2upx 4upx 0px rgba(0, 0, 0, 0.1);
	}

	.service {
		width: 30%;
	}
</style>
